<template>
  <view class="root">
    <acme-app-bar title="Moments"></acme-app-bar>
    
    <view class="list">
      <view v-for="(item, index) in list" :key="index">
        <view class="header">
          <view class="header-left">
            <view class="avatar">
              <image :src="item.avatar"></image>
            </view>
            <view class="name">{{item.name}}</view>
          </view>
        </view>
        
        <view class="title">{{item.title}}</view>
        <view class="content">{{item.content}}</view>
        
        <view class="pic-list">
          <view class="offset">
            <view class="pic" v-for="(imgUrl, cIndex) in item.pics.slice(0, 9)" :key="cIndex"
              v-if="item.pics.length > 1"
            >
              <image :src="imgUrl"></image>
            </view>
            <image class="pic-1" v-if="item.pics.length === 1" :src="item.pics[0]" mode="widthFix"></image>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        list: [
          {
            name: '猫叔慢跑',
            avatar: '/static/photo/m_4.jpg',
            title: '运动器械与装备',
            content: '提升运动体验，让运动更高效，同款课程跟着练',
            pics: [
              '/static/photo/m_1.jpg' 
            ]
          }, {
            name: '猫叔慢跑',
            avatar: '/static/photo/m_1.jpg',
            title: '运动器械与装备',
            content: '提升运动体验，让运动更高效，同款课程跟着练，给选择健康、丰富饮食的人提供新的思路',
            pics: [
              '/static/photo/m_1.jpg', 
              '/static/photo/m_2.jpg', 
              '/static/photo/m_3.jpg', 
            ]
          },{
            name: '猫叔慢跑',
            avatar: '/static/photo/m_5.jpg',
            title: '运动器械与装备',
            content: '提供专业的运动服饰，让更多用户开始享受运动，满足国人饮食习惯，给选择健康、丰富饮食的人提供新的思路',
            pics: [
              '/static/photo/m_4.jpg', 
              '/static/photo/m_3.jpg', 
              '/static/photo/m_6.jpg',
              '/static/photo/m_2.jpg',
              '/static/photo/m_1.jpg', 
              '/static/photo/m_5.jpg', 
            ]
          },
        ]
      }
    },
    methods: {
      
    }
  }
</script>

<style lang="scss">
  page {
    background-color: #fff;
  }
</style>

<style lang="scss" scoped>
  .root {
    padding: 30upx 24upx;
    
    .list {
      > view {
        padding: 30upx 0 30upx 0;
        margin-bottom: 30upx;
        position: relative;
        
        &::after {
          content: '';
          width: 100%;
          height: 1px;
          background-color: #EBEAEB;
          transform: scaleY(0.5);
          position: absolute;
          left: 0;
          right: 0;
          bottom: 0;
        }
        
        .header {
          display: flex;
          justify-content: space-between;
          
          .header-left {
            display: flex;
            align-items: center;
            
            .avatar {
              width: 90upx;
              height: 90upx;
              border-radius: 50%;
              
              image {
                width: 100%;
                height: 100%;
                border-radius: 50%;
                background-color: #eee;
              }
            }
            
            .name {
              margin-left: 20upx;
              color: #333;
              font-size: 30upx;
              font-weight: 500;
            }
          }
        }
        
        .title {
          line-height: 1;
          margin-top: 30upx;
          color: #333;
          font-size: 30upx;
          font-weight: 500;
        }
        
        .content {
          color: #333;
          font-size: 30upx;
          margin-top: 20upx;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 3;
          overflow: hidden;
        }
        
        .pic-list {
          margin-top: 25upx;
          
          .offset {
            width: calc(100% + 12upx);
            display: flex;
            flex-wrap: wrap;
            
            .pic {
              width: calc(33.333% - 12upx);
              padding-bottom: calc(33.333% - 12upx);
              height: 0;
              box-sizing: border-box;
              margin: 0 12upx 12upx 0;
              position: relative;
              
              image {
                width: 100%;
                height: 100%;
                position: absolute;
                left: 0;
                top: 0;
                border-radius: 8upx;
              }
            }
            
            .pic-1 {
              width: 260upx;
              border-radius: 8upx;
            }
          }
        }
      }
    }
  }
</style>
